<script setup>
import { ref } from 'vue';

const currentSection = ref('intro');

const sections = {
  intro: {
    title: '项目介绍',
    content: `
      <p>这是一个为Vue.js初学者设计的示例项目，包含多个简单实用的组件示例，帮助你快速了解Vue的基本概念。</p>
      <p>通过这个项目，你可以学习到：</p>
      <ul>
        <li>Vue 3组件的基本结构</li>
        <li>组合式API (Composition API)的用法</li>
        <li>响应式数据处理</li>
        <li>模板语法和指令</li>
        <li>事件处理</li>
        <li>计算属性</li>
      </ul>
    `
  },
  components: {
    title: '项目组件',
    content: `
      <p>本项目包含以下主要组件：</p>
      <ol>
        <li>
          <strong>TodoList</strong> - 待办事项列表
          <p>展示了基本的列表渲染、表单处理和条件样式</p>
        </li>
        <li>
          <strong>Counter</strong> - 计数器
          <p>展示了响应式数据和计算属性的基本用法</p>
        </li>
        <li>
          <strong>Documentation</strong> - 文档页面
          <p>即当前页面，用于展示项目说明</p>
        </li>
        <li>
          <strong>QuickStart</strong> - 快速入门
          <p>提供项目启动和使用的步骤指南</p>
        </li>
      </ol>
    `
  },
  vuejs: {
    title: 'Vue.js 基础',
    content: `
      <h3>Vue 3 核心概念</h3>
      
      <h4>1. 组件结构</h4>
      <pre><code>&lt;script setup&gt;
  // 组件逻辑部分
&lt;/script&gt;

&lt;template&gt;
  // HTML模板部分
&lt;/template&gt;

&lt;style scoped&gt;
  // CSS样式部分
&lt;/style&gt;</code></pre>

      <h4>2. 响应式数据</h4>
      <pre><code>import { ref, reactive } from 'vue';

// 使用ref创建原始值的响应式引用
const count = ref(0);
// 访问和修改值需要使用.value
count.value++;

// 使用reactive创建响应式对象
const state = reactive({
  name: '张三',
  age: 25
});
// 直接访问和修改属性
state.age = 26;</code></pre>

      <h4>3. 计算属性</h4>
      <pre><code>import { ref, computed } from 'vue';

const count = ref(0);
// 创建一个计算属性
const doubleCount = computed(() => count.value * 2);</code></pre>

      <h4>4. 常用指令</h4>
      <ul>
        <li><code>v-model</code>: 双向数据绑定</li>
        <li><code>v-for</code>: 列表渲染</li>
        <li><code>v-if</code> / <code>v-else</code>: 条件渲染</li>
        <li><code>v-show</code>: 条件显示</li>
        <li><code>v-on</code> (@): 事件绑定</li>
        <li><code>v-bind</code> (:): 属性绑定</li>
      </ul>
    `
  },
  componentCommunication: {
    title: '组件通信',
    content: `
      <h3>Vue组件间通信方式</h3>
      
      <h4>1. Props 父传子</h4>
      <p>父组件向子组件传递数据的最基本方式</p>
      <pre><code>// 子组件
&lt;script setup&gt;
const props = defineProps({
  message: String,
  count: {
    type: Number,
    default: 0
  }
})
&lt;/script&gt;

// 父组件
&lt;template&gt;
  &lt;ChildComponent 
    message="你好" 
    :count="countValue" 
  /&gt;
&lt;/template&gt;</code></pre>

      <h4>2. Emits 子传父</h4>
      <p>子组件通过事件向父组件传递信息</p>
      <pre><code>// 子组件
&lt;script setup&gt;
const emit = defineEmits(['update', 'delete'])

function sendData() {
  emit('update', { id: 1, text: '新数据' })
}
&lt;/script&gt;

// 父组件
&lt;template&gt;
  &lt;ChildComponent 
    @update="handleUpdate" 
    @delete="handleDelete" 
  /&gt;
&lt;/template&gt;</code></pre>

      <h4>3. provide/inject 跨层级通信</h4>
      <p>用于深层嵌套组件间的数据传递</p>
      <pre><code>// 祖先组件提供数据
import { provide, ref } from 'vue'

const theme = ref('light')
provide('theme', theme) // 可以传递响应式数据

// 深层后代组件注入数据
import { inject } from 'vue'

const theme = inject('theme', 'light') // 第二个参数是默认值</code></pre>

      <h4>4. Pinia 状态管理</h4>
      <p>适用于大型应用的状态管理方案（Vue 3推荐）</p>
      <pre><code>// 定义store
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '张三',
    isLoggedIn: false
  }),
  actions: {
    login() {
      this.isLoggedIn = true
    }
  }
})

// 在组件中使用
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
console.log(userStore.name)
userStore.login()</code></pre>
    `
  },
  lifecycleHooks: {
    title: '生命周期钩子',
    content: `
      <h3>Vue 3组件生命周期</h3>
      <p>在组合式API中，生命周期钩子是以on开头的函数</p>
      
      <div class="lifecycle-diagram">
        <div class="lifecycle-phase">创建阶段</div>
        <div class="lifecycle-hook">onBeforeMount</div>
        <div class="lifecycle-hook">onMounted</div>
        <div class="lifecycle-phase">更新阶段</div>
        <div class="lifecycle-hook">onBeforeUpdate</div>
        <div class="lifecycle-hook">onUpdated</div>
        <div class="lifecycle-phase">卸载阶段</div>
        <div class="lifecycle-hook">onBeforeUnmount</div>
        <div class="lifecycle-hook">onUnmounted</div>
      </div>
      
      <h4>使用示例</h4>
      <pre><code>import { ref, onMounted, onBeforeUnmount } from 'vue'

const count = ref(0)

// 组件挂载后执行
onMounted(() => {
  console.log('组件已挂载')
  // 可以进行DOM操作、API调用等
  const timer = setInterval(() => {
    count.value++
  }, 1000)
  
  // 组件卸载前清理资源
  onBeforeUnmount(() => {
    clearInterval(timer)
    console.log('组件即将卸载')
  })
})</code></pre>

      <h4>常见用途</h4>
      <ul>
        <li><strong>onMounted</strong>: 初始化数据、设置事件监听器、API调用</li>
        <li><strong>onUpdated</strong>: 响应数据变化后的DOM更新</li>
        <li><strong>onBeforeUnmount</strong>: 清理定时器、事件监听器等资源</li>
      </ul>
    `
  },
  vueTips: {
    title: 'Vue实战技巧',
    content: `
      <h3>提高开发效率的Vue技巧</h3>
      
      <h4>1. 使用组合式函数(Composables)</h4>
      <p>将逻辑封装为可重用的函数</p>
      <pre><code>// useCounter.js
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const doubleCount = computed(() => count.value * 2)
  
  function increment() { count.value++ }
  function decrement() { count.value-- }
  
  return {
    count,
    doubleCount,
    increment,
    decrement
  }
}

// 在组件中使用
import { useCounter } from './composables/useCounter'

const { count, doubleCount, increment } = useCounter(10)</code></pre>

      <h4>2. 自定义指令</h4>
      <p>扩展Vue模板能力的一种方法</p>
      <pre><code>// 自动聚焦指令
const vFocus = {
  mounted: (el) => el.focus()
}

// 在组件中注册和使用
&lt;script setup&gt;
const vFocus = {
  mounted: (el) => el.focus()
}
&lt;/script&gt;

&lt;template&gt;
  &lt;input v-focus /&gt;
&lt;/template&gt;</code></pre>

      <h4>3. 动态组件</h4>
      <p>根据数据动态切换组件</p>
      <pre><code>&lt;template&gt;
  &lt;component :is="currentTab"&gt;&lt;/component&gt;
  
  &lt;button @click="currentTab = 'TabHome'"&gt;首页&lt;/button&gt;
  &lt;button @click="currentTab = 'TabAbout'"&gt;关于&lt;/button&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { ref } from 'vue'
import TabHome from './TabHome.vue'
import TabAbout from './TabAbout.vue'

const currentTab = ref('TabHome')
&lt;/script&gt;</code></pre>

      <h4>4. 异步组件</h4>
      <p>按需加载组件，提升应用性能</p>
      <pre><code>import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() => 
  import('./HeavyComponent.vue')
)

// 带加载和错误状态
const AsyncComponentWithState = defineAsyncComponent({
  loader: () => import('./HeavyComponent.vue'),
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 200,
  timeout: 3000
})</code></pre>
    `
  },
  commands: {
    title: '项目命令',
    content: `
      <h3>基本命令</h3>
      <table>
        <tr>
          <th>命令</th>
          <th>说明</th>
        </tr>
        <tr>
          <td><code>npm install</code></td>
          <td>安装项目依赖</td>
        </tr>
        <tr>
          <td><code>npm run dev</code></td>
          <td>启动开发服务器（默认地址：http://localhost:5173/）</td>
        </tr>
        <tr>
          <td><code>npm run build</code></td>
          <td>构建生产版本</td>
        </tr>
        <tr>
          <td><code>npm run preview</code></td>
          <td>预览生产构建</td>
        </tr>
      </table>
      
      <h3>项目创建</h3>
      <p>如果你想从头创建类似的项目，可以使用以下命令：</p>
      <pre><code>npm init vue@latest</code></pre>
      <p>这将启动Vue项目创建向导，你可以根据需要选择选项。</p>
    `
  },
  resources: {
    title: '学习资源',
    content: `
      <h3>官方资源</h3>
      <ul>
        <li><a href="https://cn.vuejs.org/" target="_blank">Vue.js 官方文档</a></li>
        <li><a href="https://cn.vuejs.org/guide/introduction.html" target="_blank">Vue.js 指南</a></li>
        <li><a href="https://cn.vuejs.org/api/" target="_blank">API 参考</a></li>
        <li><a href="https://cn.vuejs.org/examples/" target="_blank">示例</a></li>
      </ul>
      
      <h3>推荐学习路径</h3>
      <ol>
        <li>学习基础语法和Vue实例</li>
        <li>学习组件和组件通信</li>
        <li>学习Vue路由和状态管理</li>
        <li>学习Vue CLI或Vite构建工具</li>
        <li>学习Vue生态系统（Pinia, Vue Router等）</li>
      </ol>
      
      <h3>推荐工具</h3>
      <ul>
        <li>Vue DevTools - Vue开发调试工具</li>
        <li>VS Code + Volar扩展 - 代码编辑器和Vue语法支持</li>
      </ul>
    `
  }
};
</script>

<template>
  <div class="doc-container">
    <aside class="doc-sidebar">
      <h3>文档导航</h3>
      <ul>
        <li 
          v-for="(section, key) in sections" 
          :key="key"
          :class="{ active: currentSection === key }"
          @click="currentSection = key"
        >
          {{ section.title }}
        </li>
      </ul>
    </aside>
    
    <main class="doc-content">
      <h2>{{ sections[currentSection].title }}</h2>
      <div v-html="sections[currentSection].content"></div>
    </main>
  </div>
</template>

<style scoped>
.doc-container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  min-height: 600px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: white;
}

.doc-sidebar {
  width: 200px;
  padding: 20px;
  background-color: #f5f5f5;
  border-right: 1px solid #eee;
  border-radius: 8px 0 0 8px;
}

.doc-sidebar h3 {
  margin-top: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
  color: #42b983;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.doc-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.doc-sidebar li {
  padding: 10px;
  margin: 5px 0;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 14px;
}

.doc-sidebar li:hover {
  background-color: #e8e8e8;
}

.doc-sidebar li.active {
  background-color: #42b983;
  color: white;
}

.doc-content {
  flex: 1;
  padding: 30px;
  overflow-y: auto;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  line-height: 1.6;
  color: #333;
}

.doc-content h2 {
  margin-top: 0;
  color: #2c3e50;
  border-bottom: 2px solid #42b983;
  padding-bottom: 10px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-weight: 600;
}

.doc-content h3, .doc-content h4 {
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  color: #2c3e50;
  font-weight: 500;
}

pre {
  background-color: #f8f8f8;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  margin: 1em 0;
}

code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
}

p, ul, ol {
  margin-top: 0.6em;
  margin-bottom: 1em;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

table th, table td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  text-align: left;
}

table th {
  background-color: #f0f0f0;
}

a {
  color: #42b983;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.lifecycle-diagram {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.lifecycle-phase {
  background-color: #42b983;
  color: white;
  padding: 8px 15px;
  border-radius: 4px;
  margin-top: 15px;
  font-weight: bold;
  text-align: center;
}

.lifecycle-hook {
  background-color: #e8f5e9;
  padding: 8px 15px;
  border-left: 3px solid #42b983;
  margin: 8px 0;
}
</style> 